<template>
    <div class="app-container">
        <!-- :stretch="true"  选项卡平铺 -->
        <el-tabs v-model="inpFeesActive" style="height: 100%;">
            <el-tab-pane label="出院结算" name="0" style="height: 100%;overflow-y: auto;">
                <master ref="masterRef"/>
            </el-tab-pane>
            <el-tab-pane label="出院结算记录" name="1" style="height: 100%;overflow-y: auto;">
                <query-index ref="queryIndexRef" />
            </el-tab-pane>
            <el-tab-pane label="取消结算" name="2" style="height: 100%;overflow-y: auto;">
                <cancel-fees-index/>
            </el-tab-pane>
            <el-tab-pane label="出院结算结账" name="3" style="height: 100%;overflow-y: auto;">
                <inp-acct-master/>
            </el-tab-pane>
            <el-tab-pane label="出院结算结账记录查询" name="4" style="height: 100%;overflow-y: auto;">
                <inp-acct-master-record ref="inpAcctMasterRecordRef"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script lang="ts">
export default {
    name: "InpFeesMaster"
}
</script>
<script lang="ts" setup>
import Master from "./master.vue"
import QueryIndex from "./query/index.vue"
import CancelFeesIndex from "./cancelFees/index.vue"
import InpAcctMaster from "../inpAcct/master.vue"
import InpAcctMasterRecord from "../inpAcct/inpMasterRecord.vue"

const {proxy} = getCurrentInstance() as any;
const inpFeesActive = ref('0')
const queryIndexRef = ref()
const inpAcctMasterRecordRef = ref()
const masterRef = ref();
watch(() => inpFeesActive.value, (newValue, _oldValue) => {
    if (newValue == '0') {
      nextTick(()=>{
        masterRef.value?.focusHospitalNoInput();
      })
    }
    if (newValue == '1') {
        nextTick(()=>{
            queryIndexRef.value.getList()
        })
    } else if (newValue == '4') {
        inpAcctMasterRecordRef.value.getList()
    }
})
</script>

<style scoped>
:deep(.el-tabs__item) {
    min-width: 200px;
    height: 30px;
}

:deep(.el-tabs__content) {
    height: calc(100% - 30px);
}

:deep(.el-tabs__nav-scroll) {
    background-color: #ffffff;
}

:deep(.el-tabs__header) {
    margin: 0 0 0px;
    box-shadow: 0 0 18px 0 #878787;
}
</style>
